<template>
  <div class="edit-shop-drawer">
    <el-drawer v-model="isOpen" class="shop-drawer" size="520">
      <template #header>
        <div class="collection-title">
          <div class="collection-title-circle"></div>
          <div class="collection-title-label">上样商品</div>
        </div>
      </template>
      <div class="shop-info">
        <div class="shop-box">
          <div class="top">
            <el-image style="width: 100%; height: 100%" :src="shopInfoData.mainPicUrl" fit="cover" />
          </div>

          <div class="bottom">
            <div class="header-title">{{ shopInfoData.productName }}</div>
            <div class="header-price">
              <span>
                工厂价 ¥ <span style="color: red">{{ shopInfoData.factoryLowestPrice }}</span></span
              >
              /
              <span>
                销售价 ¥ <span style="color: red">{{ shopInfoData.businessLowestPrice || "-" }}</span></span
              >
            </div>
            <div class="choose-shop">选购商家：{{ shopInfoData.selectNum }}</div>
          </div>
        </div>
      </div>

      <el-form class="edit-form" ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="140px" label-position="top">
        <el-form-item
          label="选择展厅"
          prop="showroomProductSampleList"
          v-if="props.showRoomList && props.showRoomList.length > 0"
        >
          <el-select v-model="ruleForm.showroomProductSampleList" multiple placeholder="请选择" @change="selectChange">
            <el-option
              v-for="item in props.showRoomList"
              :key="item.showroomId"
              :label="item.showroomName"
              :value="item.showroomId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="item.showroomName" prop="fileList" v-for="(item, index) in ruleForm.fileList" :key="item">
          <AliOssUpload
            :fileList="item.resourcesList"
            listType="picture-card"
            @uploadSuccess="(file, fileList) => uploadSuccess(file, fileList, index)"
            :maxLength="10"
            :maxSize="5"
          >
            <template #tips>
              <div class="img-tips">单张不超过5M,支持jpeg，jpg，png格式</div>
            </template>
          </AliOssUpload>
          <!-- <div class="flex-column">
            <el-upload
              class="upload-img"
              v-model:file-list="ruleForm.fileList"
              action="#"
              list-type="picture-card"
              :auto-upload="false"
            >
              <el-icon><Plus /></el-icon>
              <template #file="{ file, index }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                      <el-icon><Download /></el-icon>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, index)">
                      <el-icon><Delete /></el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
            <div class="img-tips">单张不超过5M,支持jpeg，jpg，png格式</div>
          </div> -->
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="footer-box">
          <el-button class="foot-btn" type="info" @click="resetForm(ruleFormRef)">返回</el-button>
          <el-button class="foot-btn" type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
        </div>
      </template>
    </el-drawer>

    <!-- 图片弹窗 -->
    <el-dialog v-model="dialogVisible" align-center>
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>
<script setup>
const emit = defineEmits(["update:modelValue", "resetForm", "submit"]);
import AliOssUpload from "@/components/AliOssUpload";
const props = defineProps({
  // 弹窗开关
  modelValue: {
    type: Boolean,
    default: false
  },
  // 商品信息
  shopInfo: {
    type: Object,
    default: () => {}
  },
  // 展厅列表
  showRoomList: {
    type: Array,
    default: () => []
  }
});

// 商品卡片信息
const shopInfoData = ref({});
watch(
  () => props.shopInfo,
  val => {
    shopInfoData.value = val;
  },
  { deep: true }
);

// 弹窗开关
const isOpen = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  }
});

const ruleFormRef = ref();
const ruleForm = ref({
  fileList: []
});

// const picIdLenValidator = (rule, value, callback) => {
//   if (value.length > 0) {
//     return callback();
//   } else {
//     callback("请上传商品图片");
//   }
// };

const rules = reactive({
  showroomProductSampleList: [{ required: true, message: "请选择展厅", trigger: "change" }]
  // fileList: [
  //   { required: true, message: "请上传商品图片", trigger: "change" },
  //   { validator: picIdLenValidator, trigger: "change" }
  // ]
});

// 提交
const submitForm = async formEl => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      emit("submit", ruleForm.value);
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  emit("resetForm");
};

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const uploadSuccess = (file, fileList, index) => {
  ruleForm.value.fileList[index].resourcesList = fileList;
};

// 展厅变化
const selectChange = val => {
  if (val.length > ruleForm.value.fileList.length) {
    let showRoomItem = props.showRoomList.find(item => {
      return item.showroomId == val[val.length - 1];
    });
    ruleForm.value.fileList.push({
      ...props.shopInfo,
      ...{ showroomId: showRoomItem.showroomId, showroomName: showRoomItem.showroomName },
      ...{ resourcesList: [] }
    });
  } else {
    let idx = 0;
    ruleForm.value.fileList.forEach((item, index) => {
      if (
        !val.some(el => {
          return el == item.showroomId;
        })
      ) {
        idx = index;
      }
    });
    ruleForm.value.fileList.splice(idx, 1);
  }
};
</script>
<style scoped lang="scss">
.edit-shop-drawer {
  ::v-deep(.el-drawer) {
    display: flex;
    flex-direction: column;
  }
}
.shop-info {
  border-bottom: 1px solid #eaeef9;

  .shop-box {
    width: 294px;
    // padding: 0 10px;
    //   margin-right: 20px;
    margin: 0 auto;
    margin-bottom: 32px;
    // margin: 0 10px;
    box-sizing: border-box;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
    background-color: #fff;
    border-radius: 10px;

    .top {
      width: 100%;
      height: 200px;
      box-shadow: 4px 0px 4px 0px rgba(4, 19, 74, 0.1);
      border-radius: 10px 10px 10px 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .bottom {
      padding: 20px 16px 16px 16px;

      .header-title {
        font-family:
          Microsoft YaHei,
          Microsoft YaHei;
        font-weight: 700;
        min-height: 50px;
        font-size: 14px;
        color: #3d3d3d;
        margin-bottom: 12px;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-transform: none;
      }

      .header-price {
        font-family:
          Microsoft YaHei,
          Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        // margin-bottom: 10px;
        height: 34px;
        color: #4e5969;
        line-height: 18px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .choose-shop {
        font-family:
          Microsoft YaHei,
          Microsoft YaHei;
        font-weight: 400;
        margin-bottom: 10px;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        font-size: 12px;
        color: #86909c;
      }
    }
  }
}

.edit-form {
  margin-top: 32px;
  ::v-deep(.el-form-item__label) {
    font-size: 14px;
    color: #86909c;
  }
  .upload-img {
    ::v-deep(.el-upload-list__item) {
      width: 100px;
      height: 100px;
    }
    ::v-deep(.el-upload) {
      width: 100px;
      height: 100px;
    }
  }
  .img-tips {
    font-size: 12px;
    color: #86909c;
  }
}

.footer-box {
  text-align: center;
  .foot-btn {
    width: 120px;
  }
}
</style>
